<template>
  <div>
    <!--      搜索组件-->
    <div class="tab-body">
      <div class="tab-box">
        <div style="display: flex;align-items: center;">
          <SearchModle dataKey="applyMateriel" @searchFn="searchFn" ref="searchModleFn"></SearchModle>
          <div style="width: 10px;"></div>
          <downexcel type="materielLendingEnd" :option="dowloadOption"></downexcel>
        </div>
      </div>
      <div class="tab-box-list">
        <el-button size="small" type="warning" :disabled="handleSelection.length?false:true" plain @click="openBorrwBook(2)">批量领用</el-button>
        <el-button size="small" :disabled="handleSelection.length?false:true" type="primary" plain @click="handleDetel(2)">批量删除</el-button>
      </div>
    </div>

    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStripe"
            :border="tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="50"
              align="center"
              :key="5">
          </el-table-column>
          <el-table-column
              label="物料名称">
            <template slot-scope="scope">
              {{ scope.row.materiel.name }}
            </template>
          </el-table-column>
          <el-table-column
              label="领用人">
            <template slot-scope="scope">
              {{ scope.row.user.realname }}
            </template>
          </el-table-column>
          <el-table-column
              prop="content"
              label="申请用途">
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="申请时间">
          </el-table-column>
          <el-table-column
              :key="4"
              prop="number"
              label="领用数量"
              width="90">
          </el-table-column>
          <el-table-column
              label="单位"
              width="50">
            <template slot-scope="scope">
              {{ scope.row.materiel ? scope.row.materiel.unit : '' }}
            </template>
          </el-table-column>
          <el-table-column
              :key="3"
              label="领用状态"
              width="80">
            <template slot-scope="scope">
              申请中
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" :key="2">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="openBorrwBook(1,scope.$index)" plain>
                确定领取
              </el-button>
              <el-button plain type="danger" size="small" @click="handleDetel(1,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import api from '@/utils/api.js'

export default {
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      handleSelection: [],
      // 搜索
      searchForm: {},
      dowloadOption:{
        status: 0
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    async InitFn() {
      // types 	整型 	必填 	1 	- 	0进货1申请
      // type 0时间 1数量正序 2数量倒叙
      // status 	整型 	必填 	1 	- 	类型0申请1确认2取消
      this.searchForm.p = this.page.pageindex
      this.searchForm.types = 1
      this.searchForm.type = 0
      this.searchForm.status = 0
      let data = await this.$fetch(this.api.admin_materiel_log_index, this.searchForm)
      if (!data.code) {
        for (let i in data.list.data) {
          data.list.data[i].create_time = data.list.data[i].create_time.split(' ')[0]
        }
        this.tabTotal = data.number
        this.arryList = data.list.data
        this.page.total = data.list.total
        this.$emit('getNewNumber',data.number)
      } else {
      }
    },
    searchFn(option) {
      this.page.pageindex = 1;
      this.searchForm = option;
      this.dowloadOption = option;
      this.dowloadOption.status = 0;
      this.InitFn()
    },
    openBorrwBook(type, index) {
      if(type===2 && !this.handleSelection.length){
        this.$message.error('选择需要领用的内容')
        return
      }
      let that = this
      this.$confirm('确认领出此物料，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let option_ = []
        let data_ = {}
        if (type === 2) {
          for (let i in this.handleSelection) {
            option_.push(this.handleSelection[i].id)
          }
          data_.id = option_.join(',')
        } else {
          data_.id = this.arryList[index].id
        }
        console.log('提交参数：', data_)
        that.checkine(data_)
      }).catch(() => {
      })
    },
    async checkine(data_) {
      this.$post(api.admin_materiel_log_sell, data_).then((response) => {
        if (response.code === 0) {
          this.InitFn()
          this.$message.success(data.msg)
        } else {
          console.log('请求失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleDetel(type, index) {
      if(type===2 && !this.handleSelection.length){
        this.$message.error('选择需要删除的内容')
        return
      }
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // type 1 单个删除 2 批量删除 3 批量领用
        let option_ = []
        let data_ = {}
        if (type === 2) {
          for (let i in this.handleSelection) {
            option_.push(this.handleSelection[i].id)
          }
          data_.id = option_.join(',')
        } else {
          data_.id = this.arryList[index].id
        }
        console.log('提交参数：', data_)
        // 删除
        this.detelRespon(data_)
      }).catch(() => {

      })
    },
    detelRespon(data_) {
      this.$post(this.api.mater.materielDelete, data_).then((response) => {
        if (response.code === 0) {
          // this.arryList.splice(index, 1)
          this.InitFn()
          this.$message.success(data.msg)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSelectionChange(val) {
      console.log('选择框选择变化', val) // 所有选中值
      this.handleSelection = val
    }
  },
  mounted() {
  }
}
</script>

